<template>
    <div>
        <van-nav-bar title="门诊报告" left-text="" left-arrow @click-left="onClickLeft" />
        <div style="
        padding: 0px 16px;
        height:620px;
        background-color: #f5f5f5;
        overflow-y: auto;
        ">
            <div style="
        width:100%;
        height: 45px;
        background-color: white;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        display: flex;
        ">
                <div>
                    <span style="margin-left: 20px;">{{ ii.name }}</span>
                    <span style="margin-left: 20px;">{{ ii.ma }}</span>
                </div>
                <div style="
                display: flex;
                " @click="g4">
                    <img style="
                    width: 20px;
                    height: 20px;
                    margin-left: 115px;
                    margin-top: 15px;
                    " src="https://cdn7.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E7%BC%B4%E8%B4%B9/u1116.svg"
                        alt="">
                    <p style="
                        margin-left: 2px;
                    ">切换</p>
                </div>

            </div>

            <div style="
        width:100%;
        height: 40px;
        background-color: white;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 40px;
        display: flex;
        ">
                <button @click="flagsw" :class="flags == true ? 'activd1d1e' : 'qwe111rg41'">检查</button>
                <button @click="flagsw1" :class="flags == false ? 'activ1d1d1e' : 'qwerg41'">检验</button>
            </div>

            <div v-if="flags">
                <div 
                @click="de90"
                style="
               width:90%;
              
               background-color: white;
               margin-top: 15px;
               border-radius: 7px;
               line-height: 50px;
               padding: 12px 16px;
               ">
                    <p style="
                      font-weight: 600;
                      height: 18px;
                      border-left: 5px solid #0091ff;
                      line-height: 18px;
                      margin-left: -12px;
                      display: flex;
                      ">
                        <span style="margin-left: 10px;
                        font-size: 14px;
                        ">双肾及肾血管彩色多普勒</span>
                        <span style="
                        margin-left: 90px;
                        font-weight: 400;
                        font-style: normal;
                        font-size: 12px;
                        color: #13C2C2;
                        background-color: #e6fffb;
                        ">
                            报告已出
                        </span>
                    </p>
                    <p style="
                      font-weight: 400;
                      font-style: normal;
                      font-size: 12px;
                      color: #AAAAAA;
                      
                      ">
                        <span style="margin-left: 2px;">报告时间：2020-01-01 10:20:36</span>
                    </p>

                </div>

                <div style="
               width:90%;
              
               background-color: white;
               margin-top: 15px;
               border-radius: 7px;
               line-height: 50px;
               padding: 12px 16px;
               ">
                    <p style="
                
                      font-weight: 600;
                      height: 18px;
                      border-left: 5px solid #0091ff;
                      line-height: 18px;
                      margin-left: -12px;
                      display: flex;
                      ">
                        <span style="margin-left: 10px;
                        font-size: 14px;
                        ">上腹部CT平扫</span>
                        <span style="
                        margin-left: 155px;
                        font-weight: 400;
                        font-style: normal;
                        font-size: 12px;
                        color: #13C2C2;
                        background-color: #e6fffb;
                        ">
                            报告已出
                        </span>
                    </p>
                    <p style="
                      font-weight: 400;
                      font-style: normal;
                      font-size: 12px;
                      color: #AAAAAA;
                      
                      ">
                        <span style="margin-left: 2px;">报告时间：2020-01-01 10:20:36</span>
                    </p>

                </div>

                <div style="
               width:90%;
              
               background-color: white;
               margin-top: 15px;
               border-radius: 7px;
               line-height: 50px;
               padding: 12px 16px;
               ">
                    <p style="
                
                      font-weight: 600;
                      height: 18px;
                      border-left: 5px solid #0091ff;
                      line-height: 18px;
                      margin-left: -12px;
                      display: flex;
                      ">
                        <span style="margin-left: 10px;
                        font-size: 14px;
                        ">核磁共振</span>
                        <span style="
                        margin-left: 185px;
                        font-weight: 400;
                        font-style: normal;
                        font-size: 12px;
                        color: #ff4d4f;
                        background-color: #fff1f0;
                        ">
                            报告未出
                        </span>
                    </p>
                    <p style="
                      font-weight: 400;
                      font-style: normal;
                      font-size: 12px;
                      color: #AAAAAA;
                      
                      ">
                        <span style="margin-left: 2px;">报告时间：--</span>
                    </p>

                </div>
            </div>
            <div v-if="!flags">
                <div 
                @click="sdf23"
                style="
               width:90%;
              
               background-color: white;
               margin-top: 15px;
               border-radius: 7px;
               line-height: 50px;
               padding: 12px 16px;
               ">
                    <p style="
                
                      font-weight: 600;
                      height: 18px;
                      border-left: 5px solid #0091ff;
                      line-height: 18px;
                      margin-left: -12px;
                      display: flex;
                      ">
                        <span style="margin-left: 10px;
                        font-size: 14px;
                        ">上腹部CT平扫</span>
                        <span style="
                        margin-left: 155px;
                        font-weight: 400;
                        font-style: normal;
                        font-size: 12px;
                        color: #13C2C2;
                        background-color: #e6fffb;
                        ">
                            报告已出
                        </span>
                    </p>
                    <p style="
                      font-weight: 400;
                      font-style: normal;
                      font-size: 12px;
                      color: #AAAAAA;
                      
                      ">
                        <span style="margin-left: 2px;">报告时间：2020-01-01 10:20:36</span>
                    </p>

                </div>

                <div style="
               width:90%;
              
               background-color: white;
               margin-top: 15px;
               border-radius: 7px;
               line-height: 50px;
               padding: 12px 16px;
               ">
                    <p style="
                
                      font-weight: 600;
                      height: 18px;
                      border-left: 5px solid #0091ff;
                      line-height: 18px;
                      margin-left: -12px;
                      display: flex;
                      ">
                        <span style="margin-left: 10px;
                        font-size: 14px;
                        ">核磁共振</span>
                        <span style="
                        margin-left: 185px;
                        font-weight: 400;
                        font-style: normal;
                        font-size: 12px;
                        color: #ff4d4f;
                        background-color: #fff1f0;
                        ">
                            报告未出
                        </span>
                    </p>
                    <p style="
                      font-weight: 400;
                      font-style: normal;
                      font-size: 12px;
                      color: #AAAAAA;
                      
                      ">
                        <span style="margin-left: 2px;">报告时间：--</span>
                    </p>

                </div>
            </div>


        </div>
    </div>

    <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '50%' }">
        <div style="
        margin-top: 10px;
                    ">
            <h3 style="
        text-align: center;
        ">选择就诊人</h3>
            <p style="
            margin-top: -22px;
            margin-left: 340px;
            font-size: 20px;
          " @click="showBottom = false">x</p>
            <div style="
        width:90%;
        height: 45px;
        background-color: #e6f4ff;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        display: flex;
        margin-left: 20px;
        " v-for="(i, index) in renmen" :key="index" @click="dian(i)">
                <span style="margin-left: 20px;">{{ i.name }}</span>
                <span style="margin-left: 20px;">{{ i.ma }}</span>
            </div>



        </div>

    </van-popup>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const de90 = () => {
    router.push("/Q1") 
}
const sdf23 = () => {
     router.push("/Q2") 
}

const showBottom = ref(false)

const renmen = ref([
    {
        name: "王小轲",
        ma: "2015*****10"
    },
    {
        name: "李玲玲",
        ma: "2015*****11"
    },
])
const ii = ref({
    name: "王小轲",
    ma: "2015*****10"
})
let flags = ref(true)
const flagsw = () => {
    flags.value = true
}
const flagsw1 = () => {
    flags.value = false
}
const dian = (i: any) => {
    ii.value = i
    showBottom.value = false

}


const onClickLeft = () => history.back();


const g4 = () => {
    showBottom.value = true
}





</script>

<style scoped>
.qwerg41 {
    width: 50%;
    height: 40px;
    background-color: white;
    border: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    background-color: white;
    color: black;
}

.activ1d1d1e {
    width: 50%;
    height: 40px;
    background-color: #1677ff;
    color: white;
    border: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.qwe111rg41 {
    width: 50%;
    height: 40px;
    background-color: white;
    color: black;
    border: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.activd1d1e {
    width: 50%;
    height: 40px;
    background-color: #1677ff;
    color: white;
    border: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}
</style>